<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        body {
            background: #F2F2F2;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
            text-align: right;
        }

        .chart-outer {
            height: 200px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">用户管理,部门管理</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-button type="success" @click="addClick" style="">新增</el-button>
                </div>
                <el-table border stripe style="width: 100%" :data="tabData" row-key="DepartmentID"
                          default-expand-all="true">
                    <el-table-column prop="DepartmentID" label="部门ID" align="center">
                    </el-table-column>
                    <el-table-column prop="DepartmentName" label="部门名称" align="center">
                    </el-table-column>
                    <el-table-column prop="ParentID" label="父节点" align="center">
                    </el-table-column>
                    <!--                    <el-table-column prop="attributes.ResponseUrl" label="菜单路径" align="center">-->
                    <!--                    </el-table-column>-->
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" round size="small"
                                       icon="el-icon-edit"></el-button>
                            <el-button round icon="el-icon-delete" size="small"
                                       @click="deleteClick(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-col>
        </el-row>
        <el-dialog :title="editMod?'编辑部门':'新增部门'"
                   :visible.sync="editFormVisible"
                   center
                   width="35%">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="部门名称" prop="DepartmentName" :rules="[
                             {required:true,message:'名称不能为空!',trigger:'blur'}]">
                    <el-input v-model="form.DepartmentName"></el-input>
                </el-form-item>
                <el-form-item label="父级菜单">
                    <el-cascader
                            v-model="form.ParentID"
                            :options="menuTree"
                            :show-all-levels="false"
                            :props="{
                                      value: 'DepartmentID',
                                      label: 'DepartmentName',
                                      children: 'children'
                                    }"
                            :change-on-select="true"
                            filterable
                    ></el-cascader>
                </el-form-item>
                <el-form-item style="text-align: center">
                    <el-button @click="cancelClick" style="background-color: #7eb8b0  ">取消</el-button>
                    <el-button @click="submitClick('form')" style="margin-left: 40px;background-color: #f9b317;">保存
                    </el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</div>

<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage = new Vue({
            el: '#page-monitor',
            data: {
                editFormVisible: false,
                funName: '',
                tabData: [],
                menuTree: [],
                defaultProps: {
                    label: 'title',
                },
                form: {},
                editMod: false
            },
            methods: {
                addClick: function (data) {
                    this.form = {};
                    this.editMod = false
                    this.editFormVisible = true
                },
                handleClick(data) {
                    this.form = {
                        DepartmentName: data.DepartmentName,
                        DepartmentID: data.DepartmentID,
                        ParentID: data.ParentID
                    }
                    this.editMod = true
                    this.editFormVisible = true
                },
                cancelClick() {
                    this.form = {}
                    this.editFormVisible = false
                },
                deleteClick(data) {
                    this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true
                    }).then(() => {
                        HttpUtil.get('Department/Delete', {DepartmentID: data.DepartmentID}).success((res) => {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getMenuAll();
                        })

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                searchRole() {
                },
                submitClick(formName) {
                    if (this.form.ParentID)
                        this.form.ParentID = this.form.ParentID[this.form.ParentID.length - 1];
                    // console.log(this.form);
                    // this.$refs[formName].validate((valid) => {
                    //     if (valid) {
                    if (!this.form.DepartmentName) {
                        this.$message({type: 'error', message: '部门名称不能为空'})
                        return;
                    }
                    // if (!this.form.ParentID) {
                    //     this.$message({type: 'error', message: '父级菜单不能为空'})
                    //     return;
                    // }
                    if (this.editMod) {
                        HttpUtil.get('Department/Update', this.form).success((res) => {
                            this.$message({
                                type: 'success',
                                message: '修改成功'
                            });
                            this.getMenuAll();
                            this.cancelClick();
                        })
                    } else {
                        // SiteConfig.account.projectNo
                        this.form.UserId = SiteConfig.account.id;
                        HttpUtil.get('Department/Add', this.form).success((res) => {
                            this.$message({
                                type: 'success',
                                message: '保存成功'
                            })
                            this.getMenuAll();
                            this.cancelClick();
                        })

                    }

                    // } else {
                    //     this.$message({
                    //         type: 'error',
                    //         message: '输入内容不能为空'
                    //     })
                    // }
                    // });
                },
                parseZone(data, pid) {
                    const result = []
                    let temp = []
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].ParentID == pid) {
                            const obj = data[i]
                            temp = this.parseZone(data, data[i].DepartmentID)
                            if (temp.length > 0) {
                                obj.children = temp
                            }
                            result.push(obj)
                        }
                    }
                    return result
                },
                getMenuAll() {
                    var p = {};
                    // SiteConfig.account.projectNo
                    p.UserId = SiteConfig.account.id;
                    HttpUtil.get('Department/List', p).success((res) => {
                        this.tabData = vuePage.parseZone(res.data, null);
                        this.menuTree = vuePage.parseZone(res.data, null);
                    })
                },
            },
            created: function () {
                this.getMenuAll();
            }
            ,
            mounted: function () {
            }
        })
    ;


</script>

</body>
</html>
